<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据统计</el-breadcrumb-item>
            <el-breadcrumb-item>数据报表</el-breadcrumb-item>
        </el-breadcrumb>

            <el-card  >
                 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
              <div id="main" style="width: 750px;height:500px;"></div>

            </el-card>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    import _ from 'lodash'
export default {
    data(){
        return{
                // 指定图表的配置项和数据
                options: {
                            title: {
                            text: '用户来源'
                            },
                            tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                backgroundColor: '#E9EEF3'
                                }
                            }
                            },
                            grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                            },
                            xAxis: [
                            {
                                boundaryGap: false
                            }
                            ],
                            yAxis: [
                            {
                                type: 'value'
                            }
                            ]
                        },
        //     option : {
        //         title: {
        //             tex: 'ECharts 入门示例'
        //         },
        //         tooltip: {},
        //         legend: {
        //             data:['销量']
        //         },
        //         xAxis: {
        //             data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        //         },
        //         yAxis: {},
        //         series: [{
        //             name: '销量',
        //             type: 'bar',
        //             data: [5, 20, 36, 10, 10, 20]
        //         }]
        //     }
        }
    },
   async mounted() {
            // 使用刚指定的配置项和数据显示图表。
             const {data:res} = await this.$http.get(`reports/type/1`)
             if(res.meta.status !==200) return this.$Message.error('数据报表获取失败')
              this.$Message.success('数据报表获取成功')
            console.log(res);
            // myChart.setOption(res.data)
            // 基于准备好的dom，初始化echarts实例
          const newoptions =   _.merge(this.options,res.data)
        var myChart = echarts.init(document.getElementById('main'));
         myChart.setOption(newoptions);
    },
    methods: {


    }
}
</script>

<style lang="less" scoped>
.el-card{
    margin-top:20px;
    box-shadow: 0 0 3px #ddd;
}
</style>